<template>
  <el-drawer
    :title="refForm.id?$t('message.edit') + $t('message.byk'):$t('message.add') + $t('message.byk')"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :visible.sync="showApplication"
    size="800px"
    @close="closeDrawer"
  >
    <el-form ref="ruleForm" :model="refForm" :rules="rules" label-width="auto" label-suffix="：">
      <el-form-item :label="$t('message.bykmc')" prop="name">
        <el-input
          v-model="refForm.name"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr') + $t('message.bykmc')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.bdlx')" prop="type">
        <el-select v-model="refForm.type" filterable :disabled="refForm.id" :placeholder="$t('message.qxz') + $t('message.bdlx')" style="width: 100%;">
          <el-option :label="$t('message.tc')" value="0" />
          <el-option :label="$t('message.kc')" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="refForm.type === '0'" :label="$t('message.bdcp')" prop="objId">
        <el-select
          v-model="refForm.objId"
          style="width: 100%;"
          :disabled="refForm.id"
          :placeholder="$t('message.qxz') + $t('message.zklx')"
        >
          <el-option
            v-for="item in tcList"
            :key="item.objId"
            :label="item.objName"
            :value="item.objId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="refForm.type === '1'" :label="$t('message.bdcp')" prop="objId2">
        <el-select
          v-model="refForm.objId2"
          style="width: 100%;"
          :placeholder="$t('message.qxz') + $t('message.zklx')"
          :disabled="refForm.id"
        >
          <el-option
            v-for="item in kcList"
            :key="item.objId"
            :label="item.objName"
            :value="item.objId"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.price')" prop="price">
        <el-input
          v-model="refForm.price"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr') + $t('message.price')"
          oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.zklx')" prop="discountType">
        <el-select
          v-model="refForm.discountType"
          style="width: 100%;"
          :disabled="refForm.id"
          :placeholder="$t('message.qxz') + $t('message.zklx')"
        >
          <el-option
            v-for="item in zkList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div
        v-if="refForm.discountType == '1'"
        style="display: flex; flex-wrap: wrap"
      >
        <el-form-item
          v-for="vip in vipTypes"
          :key="vip.id"
          align="center"
          :label="vip.name || vip.cardName"
          style="width: 50%"
          :prop="`discountMap.${vip.id}`"
          :rules="{
            required: true,
            message: $t('message.qsr') + $t('message.hyzk'),
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="refForm.discountMap[vip.id]"
            :disabled="refForm.id"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            oninput="if(value<0||value>1) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
            type="text"
            :placeholder="$t('message.qsr') + $t('message.hyzk') + '(' + $t('message.bllwxs') + ')'"
            maxlength="50"
          />
        </el-form-item>
      </div>
      <el-form-item :label="$t('message.zfsl')" prop="circulationAll">
        <el-input
          v-model="refForm.circulationAll"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr')"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item :label="$t('message.rfsl')" prop="circulationDay">
        <el-input
          v-model="refForm.circulationDay"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr')"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item :label="$t('message.status')">
        <el-switch v-model="refForm.status" :active-value="'1'" :inactive-value="'0'" :disabled="refForm.id" />
      </el-form-item>
      <el-form-item>
        <el-button @click="closeDrawer">{{ $t('message.qx') }}</el-button>
        <el-button :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.baocun') }}</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import {
  escortAdd, escortEdit, cardList, escortObjList
} from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      showApplication: false,
      subLoading: false,
      modalDialog: store.getters.dialog,
      refForm: {
        discountMap: {},
        status: '0',
        discountType: '0'
      },
      kcList: [],
      vipTypes: [],
      zkList: [
        { value: '0', label: this.$t('message.mrzk') },
        { value: '1', label: this.$t('message.zdyzk') }
      ],
      tcList: [],
      rules: {
        name: [{ required: true, message: this.$t('message.qsr') + this.$t('message.bykmc'), trigger: 'blur' }],
        price: [{ required: true, message: this.$t('message.qsr') + this.$t('message.price'), trigger: 'blur' }],
        circulationDay: [{ required: true, message: this.$t('message.qsr') + this.$t('message.rfsl'), trigger: 'blur' }],
        circulationAll: [{ required: true, message: this.$t('message.qsr') + this.$t('message.zfsl'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('message.qxz') + this.$t('message.bdlx'), trigger: 'change' }],
        objId: [{ required: true, message: this.$t('message.qxz') + this.$t('message.bdcp'), trigger: 'change' }],
        objId2: [{ required: true, message: this.$t('message.qxz') + this.$t('message.bdcp'), trigger: 'change' }]
      }
    }
  },
  created() {
    this.getPzList()
    this.getCardList()
  },
  methods: {
    getPzList() {
      escortObjList({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          queryType: '0',
          dataType: '0'
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.tcList = res.recordList
        })
        .catch(() => {})
      escortObjList({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          queryType: '0',
          dataType: '1'
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.kcList = res.recordList
        })
        .catch(() => {})
    },
    getCardList() {
      cardList({})
        .then((res) => {
          if (res.errorCode === '000000') {
            const arr = []
            res.recordList.forEach((item) => {
              if (item.status === '1') {
                arr.push({
                  name: item.cardName,
                  id: item.id,
                  value: null
                })
              }
            })
            this.vipTypes = arr
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onSubmit() {
      const param = { ...this.refForm }
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (param.type === '1') {
            param.objId = param.objId2
          }
          if (param.id) {
            that.subLoading = true
            escortEdit({ param: param })
              .then((res) => {
                // console.log(res)
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.editcg'))
                  setTimeout(() => {
                    that.$emit('success')
                  }, 300)
                }
              })
              .catch((er) => {
                that.subLoading = false
                console.log(er)
              })
          } else {
            that.subLoading = true
            escortAdd({
              param: param
            })
              .then((res) => {
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.addcg'))
                  setTimeout(() => {
                    that.$emit('success')
                  }, 300)
                }
              })
              .catch((err) => {
                that.subLoading = false
                console.log(err)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    showClick(e) {
      this.showApplication = true
      this.refForm = e || { discountMap: {},
        status: '0',
        discountType: '0' }
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    closeDrawer() {
      this.$refs.ruleForm.clearValidate()
      this.showApplication = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

</style>
